<template>
  <div class="flex height-100">
    <div class="logo-img 11">
      <img
        :src="logoBarData && logoBarData.logoComponentsData && logoBarData.logoComponentsData.imgUrl || (enterpriseConfig && enterpriseConfig.websiteDefaultLogo)"
        :class="logoBarData && logoBarData.logoComponentsData && logoBarData.logoComponentsData.imgUrl ? 'height-56' : 'height-42'"
        alt=""
        @click="handleJumpPage(logoBarData && logoBarData.logoComponentsData ? logoBarData.logoComponentsData : null)">
    </div>
    <div v-if="buyLogo" class="logo-img pad-l-14">
      <div class="height-42 flex flex-center">
        <img :src="buyTopPic" alt="" class="height-34">
      </div>
    </div>
    <div class="flex-item pad-t-16">
      <div class="align-r">
        <div v-if="search">
          <div class="height-24">
            <div class="tabs">
              <span v-if="logoBarData && (logoBarData.searchTabSwitch === '1' || logoBarData.searchTabSwitch === '2')"
                :class="tabsIndex === '2' ? 'actived' : ''" @click="tabsEls('2')">商品</span>
              <span v-if="logoBarData && (logoBarData.searchTabSwitch === '1' || logoBarData.searchTabSwitch === '3')"
                :class="tabsIndex === '3' ? 'actived' : ''" @click="tabsEls('3')">档口</span>
            </div>
          </div>
          <div class="flex v-align-c search-box">
            <el-input v-model="searchInput" class="input" />
            <el-button class="button" @click="searchResult">搜索</el-button>
          </div>
        </div>
        <div class="space-m-box">
          <template v-if="advantage && logoBarData && logoBarData.serviceComponentsData">
            <img :src="logoBarData.serviceComponentsData.imgUrl" alt="" class="height-47"
              @click="handleJumpPage(logoBarData && logoBarData.serviceComponentsData ? logoBarData.serviceComponentsData : null)">
            <!-- <ul class="font-12 font-color-6 flex flex-wrap">
              <li class="">
                <div class="flex v-align-c">
                  <img :src="advantage1" alt="" class="width-16 height-16">
                  <span>工厂直供</span>
                </div>
              </li>
              <li>
                <div class="flex v-align-c">
                  <img :src="advantage2" alt="" class="width-16 height-16">
                  <span>一件代发</span>
                </div>
              </li>
              <li>
                <div class="flex v-align-c">
                  <img :src="advantage3" alt="" class="width-16 height-16">
                  <span>售后无忧</span>
                </div>
              </li>
              <li>
                <div class="flex v-align-c">
                  <img :src="advantage4" alt="" class="width-16 height-16">
                  <span>闪电发货</span>
                </div>
              </li>
            </ul> -->
          </template>
        </div>
      </div>
    </div>
    <div v-if="cartCount" class="cart-btn flex v-align-c height-56 font-18 font-dark-blue font-w"
      @click="handleGoCart()">
      <el-badge v-if="shoppingCartNum > 0" :value="shoppingCartNum" class="badge font-normal" />
      <img v-if="iconCart" :src="iconCart" alt="" class="height-24 mar-r-15">
      购物车
    </div>
    <div v-if="lineStep" class="line-step">
      <status-process :step="step" />
    </div>
  </div>
</template>

<script lang="ts">
  import {
    useRouter
  } from 'vue-router'
  import buyTopPic from '@/assets/images/buy_top_pic.png'
  import iconCart from '@/assets/images/icon_cart.png'
  import {
    defineComponent,
    ref,
    onMounted,
    watch
  } from 'vue'
  import {
    useState
  } from '@/store/utils/useState'
  import {
    jumpPage
  } from '@/utils/jumpPageUtils'
  import {
    getShoppingCartNum
  } from '@/api/shoppingCart/shoppingCart'
  import StatusProcess from '@/components/StatusProcess/index.vue'

  export default defineComponent({
    name: 'LogoBar',
    components: {
      StatusProcess
    },
    props: {
      advantage: {
        type: Boolean,
        default: () => (true)
      },
      search: {
        type: Boolean,
        default: () => (true)
      },
      cartCount: {
        type: Boolean,
        default: () => (true)
      },
      lineStep: {
        type: Boolean,
        default: () => (false)
      },
      buyLogo: {
        type: Boolean,
        default: () => (false)
      },
      shop: Boolean,
      logoBarData: Object,
      title: {
        type: String,
        default: ''
      },
      step: {
        type: String,
        default: ''
      }
    },
    setup(props, context) {
      const router = useRouter()
      let searchInput = ref('')
      const tabsIndex = ref('2')
      const logoUrl = ref('')
      const shoppingCartNum = ref(0)
      const logoBarData = ref({
        // 搜索栏tab开关；1.全部,2商品,3档口
        searchTabSwitch: '0',
        // logo组件数据
        logoComponentsData: {},
        // 服务组件数据
        serviceComponentsData: {}
      })
      const storeState = useState('enterpriseConfig', ['enterpriseConfig'])

      onMounted(() => {
        logoBarData.value = props.logoBarData
        if (props.cartCount) {
          initgetShoppingCartNum()
        }
        if (props.title) {
          searchInput.value = props.title
        }
      })
      if (props.logoBarData && props.logoBarData.searchTabSwitch) {
        watch(() => props.logoBarData.searchTabSwitch, (newVal, oldVal) => {
          logoBarData.searchTabSwitch = newVal
          if (newVal === '1') {
            tabsIndex.value = '2'
          } else {
            tabsIndex.value = newVal
          }
        })
        watch(() => props.logoBarData.logoComponentsData, (newVal, oldVal) => {
          logoBarData.logoComponentsData = newVal
        })
        watch(() => props.logoBarData.serviceComponentsData, (newVal, oldVal) => {
          logoBarData.serviceComponentsData = newVal
        })
      }

      const tabsEls = (val: string) => {
        tabsIndex.value = val
      }
      const searchResult = () => {
        context.emit("handSearch", searchInput, tabsIndex.value)
      }
      const handleJumpPage = (item: any) => {
        if (item) {
          jumpPage(router, item.hasLink, item.linkTarget, item.linkType, item.linkParams, item.newPage)
        } else {
          jumpPage(router, 1, 1, 1005, '', 0)
        }
      }

      const handleGoCart = () => {
        jumpPage(router, 1, 1, 1007, '', 1)
      }

      const initgetShoppingCartNum = () => {
        getShoppingCartNum().then(response => {
          shoppingCartNum.value = response.data == null ? 0 : response.data
        })
      }
      return {
        buyTopPic,
        iconCart,
        searchInput,
        tabsIndex,
        tabsEls,
        searchResult,
        logoBarData,
        ...storeState,
        handleJumpPage,
        handleGoCart,
        shoppingCartNum
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .logo-img {
    padding-top: 23px;

    a {
      display: block;
    }
  }

  .tabs {
    span {
      padding: 2px 12px 3px 12px;
      color: $darkBlue;
      display: inline-block;
      cursor: pointer;

      &.actived {
        background: $darkBlue;
        color: #fff;
      }
    }
  }

  .search-box {
    ::v-deep(.input) {
      --el-input-border-radius: 0;
      --el-input-border-color: $darkBlue;
      --el-input-focus-border: $darkBlue;
      --el-input-hover-border: $darkBlue;
      --el-input-clear-hover-color: $darkBlue;
      --el-input-border: #182245 2px solid;
      width: 448px;
      opacity: 1;
      transition: none;

      &:hover {
        opacity: 1;
        --el-input-border-color: $darkBlue;
        --el-input-focus-border: $darkBlue;
        --el-input-hover-border: $darkBlue;
        --el-input-clear-hover-color: $darkBlue;
        --el-input-border: #182245 2px solid;
      }

      .el-input__inner:hover {
        border-color: #182245;
      }
    }

    ::v-deep(.button) {
      color: #fff;
      background: $darkBlue;
      border-radius: 0;
      border: #182245 1px solid;
      width: 96px;
    }
  }

  .space-m-box {
    width: 230px;
    overflow: hidden;
    box-sizing: border-box;
    margin-top: 23px;
    padding: 0 0px 0 43px;

    ul {
      li {
        padding-right: 23px;
        padding-bottom: 12px;

        &:nth-child(even) {
          padding-right: 0px;
        }
      }
    }
  }

  .cart-btn {
    margin-top: 34px;
    padding: 0 21px 0 27px;
    border: #e7e7e7 2px solid;
    position: relative;
    cursor: pointer;

    ::v-deep(.badge) {
      position: absolute;
      left: 48px;
      top: 2px;
      --el-badge-size: 20px;
      --el-badge-padding: 4px;
      --el-badge-font-size: 18px;

      .el-badge__content {
        background-color: #fe2408;
      }
    }
  }

  .line-step{
    width: 805px;
    margin-right: -102px;
  }
</style>
